<template>
  <div class='paihan'>
    <div
      uuid="1574993863297"
      k="82"
      class="lc-row  lc-row--lg"
      style="margin-bottom: 0px; margin-top: 0px; padding-top: 0px; padding-bottom: 0px;"
    >
      <div
        uuid="1574993863390"
        canplace="true"
        k="83"
        groupid=""
        class="lc-col  lc-col--cols3-1"
      >
        <div
          uuid="1574993863472"
          k="84"
          class="lc-row  lc-row--md"
          style="margin-bottom: 0px; margin-top: 0px; padding-top: 0px; padding-bottom: 0px;"
        >
          <div
            uuid="1574993861051"
            canplace="true"
            parentcolumntype="cols3-1"
            k="85"
            groupid=""
            class="lc-col  lc-col--cols-full"
          >
            <div>
              <div
                class="lc-title-floor lc-title-floor--img"
                style="background-color: rgb(255, 255, 255);"
              >
                <img
                  class="lc-title-floor__img img"
                  src="//img30.360buyimg.com/aotucms/jfs/t1/94408/6/11878/16211/5e3c1822E810e8729/b1320802e5cb77c1.jpg.webp"
                />
              </div>
            </div>
          </div>
          <div
            uuid="1574993863808"
            canplace="true"
            parentcolumntype="cols3-1"
            k="87"
            groupid=""
            class="lc-col  lc-col--cols-full"
          >
            <div>
              <div
                class="lc-goods-rank"
                style="background-color: rgb(255, 255, 255);"
              >
                <div
                  class="lc-goods-rank__container lc-goods-rank__container--lg"
                >
                  <div
                     v-loading="loading"
                    class="lc-goods-rank__inner lc-goods-rank__inner--layout1 lc-goods-rank__inner--cols3-1"
                  >
                    <div class="lc-goods-rank__hd" style="display: none;">
                      排行榜
                    </div>
                    <nav class="lc-goods-rank__tab">
                      <ul class="lc-goods-rank__tab-nav">
                        <li
                          class="lc-goods-rank__tab-nav-item  lc-goods-rank__tab-nav-item--half"
                          @click="fenlei_type=1"
                          :class="fenlei_type==1?'lc-goods-rank__tab-nav-item--on':''"
                       
                        >
                          {{this.name_1}}
                        </li>
                        <li
                         @click="fenlei_type=0"
                          :class="fenlei_type==0?'lc-goods-rank__tab-nav-item--on':''"
                          class="lc-goods-rank__tab-nav-item lc-goods-rank__tab-nav-item--half "
                     
                        >
                         {{this.name_2}}
                        </li>
                      </ul>
                    </nav>

                    <div   class="lc-goods-rank__list-box">
                      <ul
                     
                        class="lc-goods-rank__list"
                       
                        :style="fenlei_type==1?'visibility: visible; opacity: 1':'visibility:hidden ; opacity: 0;'"
                      >
                        <li
                        
                          class="lc-goods-rank__item lc-goods-rank__item--nth1 lc-goods-rank__item--top"
                         
                          style="background-color: rgb(250, 250, 250);"
                         v-for="(item, index) in this.paihan_list_1" :key="item.isbn"
                        >
                        <router-link
                              :to="{ path: '/book', query: { id: item.isbn } }"
                              @click.native="dianji(item.bookId)"
                            >
                          <div
                            class="lc-goods-rank__order "
                            :class="'lc-goods-rank__order-'+(index+1)"
                             :style=" index<3?' color:#FFFFFF ;':'color: #2C2B1D;'"
                          
                          >
                            {{index+1}}
                          </div>
                          <div class="lc-goods-rank__img" v-if='index<3'>
                            <img

                              :src=" item.img"
                            />
                          </div>
                          <div class="lc-goods-rank__info">
                            <div class="lc-goods-rank__name">
                             {{item.title}}{{item.author}}
                            </div>
                            <div class="lc-goods-rank__price-row">
                              <div
                                class="lc-goods-rank__price"
                                style="color: rgb(240, 43, 43);"
                              >
                                <i>¥</i>{{item.price}}
                              </div>
                            </div>
                          </div>
                        </router-link>
                        </li>
                      
                      </ul>
                      <ul
                        class="lc-goods-rank__list"
                        :style="fenlei_type==0?'visibility: visible; opacity: 1':'visibility:hidden ; opacity: 0;'"
                        style=" position: absolute; left: 0px; top: 0px;"
                      >
                         <li
                          :class="'lc-goods-rank__item  lc-goods-rank__item--top lc-goods-rank__item--nth2'"
                         
                          style="background-color: rgb(250, 250, 250);"
                         v-for="(item, index) in this.paihan_list_2" :key="item.isbn"
                        >
                        <router-link
                              :to="{ path: '/book', query: { id: item.isbn } }"
                              @click.native="dianji(item.bookId)"
                            >
                          <div
                            class="lc-goods-rank__order "
                            :class="'lc-goods-rank__order-'+(index+1)"
                            :style=" index<3?' color:#FFFFFF ;':'color: #2C2B1D;'"
                          >
                            {{index+1}}
                          </div>
                          <div class="lc-goods-rank__img" v-if='index<3'>
                            <img

                              :src=" item.img"
                            />
                          </div>
                          <div class="lc-goods-rank__info">
                            <div class="lc-goods-rank__name">
                             {{item.title}}{{item.author}}
                            </div>
                            <div class="lc-goods-rank__price-row">
                              <div
                                class="lc-goods-rank__price"
                                style="color: rgb(240, 43, 43);"
                              >
                                <i>¥</i>{{item.price}}
                              </div>
                            </div>
                          </div>
                        </router-link>
                        </li>
                      
                
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div
        uuid="1574993864032"
        canplace="true"
        k="89"
        groupid=""
        class="lc-col  lc-col--cols3-1"
      >
        <div
          uuid="1574993864134"
          k="90"
          class="lc-row  lc-row--md"
          style="margin-bottom: 0px; margin-top: 0px; padding-top: 0px; padding-bottom: 0px;"
        >
          <div
            uuid="1574993864220"
            canplace="true"
            parentcolumntype="cols3-1"
            k="91"
            groupid=""
            class="lc-col  lc-col--cols-full"
          >
            <div>
              <div
                class="lc-title-floor lc-title-floor--img"
                style="background-color: rgb(255, 255, 255);"
              >
                <img
                  class="lc-title-floor__img img"
                  src="//img13.360buyimg.com/aotucms/jfs/t1/107424/17/5572/18334/5e3c1859E426769d6/632a0f63313854a9.jpg.webp"
                />
              </div>
            </div>
          </div>
          <div
            uuid="1574993863116"
            canplace="true"
            parentcolumntype="cols3-1"
            k="93"
            groupid=""
            class="lc-col  lc-col--cols-full"
          >
            <div>
              <div class="lc-ad-base">
                <div class="lc-ad-base__list lc-ad-base__list--lg">
                  <div
                    class="lc-ad-base__item lc-ad-base__item--cols3-1"
                    clstag="pageclick|keycount|ad_base_1581078119855|ad_0"
                    style="padding-top: 0px;"
                  >
                    <img
                      src="//img12.360buyimg.com/babel/jfs/t1/172749/5/917/159898/60612aebEb22335e0/a0cf4460effb246f.jpg.webp"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            uuid="1574065527047"
            canplace="true"
            parentcolumntype="cols3-1"
            k="95"
            groupid=""
            class="lc-col  lc-col--cols-full"
          >
            <div>
              <div class="lc-ad-base">
                <div class="lc-ad-base__list lc-ad-base__list--lg">
                  <div
                    class="lc-ad-base__item lc-ad-base__item--cols6-1"
                    clstag="pageclick|keycount|ad_base_1574993863809|ad_0"
                    style="padding-top: 15px; width: 43%; height: 100%;  display: inline-block;"
                  >
                    <img
                      src="//img12.360buyimg.com/babel/jfs/t1/187171/40/16681/134897/61091ba7Ea250c1d9/7f78ad2316d5a7b8.png.webp"
                    />
                  </div>
                 
                  <div
                    class="lc-ad-base__item lc-ad-base__item--cols6-1"
                    clstag="pageclick|keycount|ad_base_1574993863809|ad_1"
                    style="padding-top: 15px; width: 43%;height: 80%;  display: inline-block;"
                  >
                    <img
                      src="//img13.360buyimg.com/babel/jfs/t1/140339/37/15388/142559/604ef98dE1afffcb5/6dc21b6883fb45c9.jpg.webp"
                    />
                  </div>
                  <div class="clear"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div
        uuid="1574993860932"
        canplace="true"
        k="97"
        groupid=""
        class="lc-col  lc-col--cols3-1"
      >
        <div
          uuid="1574993862609"
          k="98"
          class="lc-row  lc-row--md"
          style="margin-bottom: 0px; margin-top: 0px; padding-top: 0px; padding-bottom: 0px;"
        >
          <div
            uuid="1574993864135"
            canplace="true"
            parentcolumntype="cols3-1"
            k="99"
            groupid=""
            class="lc-col  lc-col--cols-full"
          >
            <div>
              <div
                class="lc-title-floor lc-title-floor--img"
                style="background-color: rgb(255, 255, 255);"
              >
                <img
                  class="lc-title-floor__img img"
                  src="//img13.360buyimg.com/aotucms/jfs/t1/93485/3/11836/17438/5e3c1863E5056bfcc/b0cb092766fb8fbe.jpg.webp"
                />
              </div>
            </div>
          </div>
          <div
            uuid="1574993862473"
            canplace="true"
            parentcolumntype="cols3-1"
            k="101"
            groupid=""
            class="lc-col  lc-col--cols-full"
          >
            <div>
              <div class="lc-ad-base">
                <div class="lc-ad-base__list lc-ad-base__list--lg">
                  <div
                    class="lc-ad-base__item lc-ad-base__item--cols3-1"
                    clstag="pageclick|keycount|ad_base_1578983190734|ad_0"
                    style="padding-top: 5px;"
                  >
                    <img
                      src="//img10.360buyimg.com/babel/jfs/t1/208320/7/5814/229644/616d6166Ecee5cd24/0a7b286522e9f7f6.jpg.webp"
                    />
                  </div>
                  <div
                    class="lc-ad-base__item lc-ad-base__item--cols3-1"
                    clstag="pageclick|keycount|ad_base_1578983190734|ad_1"
                    style="padding-top: 5px;"
                  >
                    <img
                      src="//img13.360buyimg.com/babel/jfs/t1/85330/6/10773/153678/5e212508Eb4293eda/1254cd2dad6309c0.jpg.webp"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data(){
    return{
      loading:false,
      name_1:'',//排行榜分类名
      name_2:'',
      paihan_list_1:[],    //分类排行耪的数组对象
      paihan_list_2:[], 
      fenlei_type:'1',  //分类类别
    }
  }, 
  mounted(){
//在mounted 声明周期中创建定时器
const timer = setInterval(()=>{
	// 这里调用调获取分类排行榜信息
	let id_1= Math.floor(Math.random() * (23 - 1) + 1);
  this.getpaihan_list_1(id_1);
  let id_2=Math.floor(Math.random() * (25- 1) + 5);
  this.getpaihan_list_2(id_2);
}, 30000) // 每两秒执行1次
// 通过$once来监听定时器，在beforeDestroy钩子可以被清除
this.$once('hook:beforeDestroy',()=>{
	// 在页面销毁时，销毁定时器
	clearInterval(timer)
})
},

  methods: {
       dianji(val){   //点击量
    let params = new URLSearchParams();
    params.append("bookId", val);
      axios.post('/fl-book/addBookHits',params).then((res)=>{
        
      })
    },
    getpaihan_list_1(id){
      this.loading=true;
      axios.get('/fl-categories/byCategory',{
        params:{
          categoriesId:id,
          size:6
        }
      }).then((res)=>{
        
        this.paihan_list_1=res.data.data[1]
      this.name_1=res.data.data[0]
        this.loading=false
      })
    },

    getpaihan_list_2(id){
       this.loading=true;
      axios.get('/fl-categories/byCategory',{
        params:{
          categoriesId:id,
          size:6
        }
      }).then((res)=>{
        
        this.paihan_list_2=res.data.data[1]
        this.name_2=res.data.data[0]
            this.loading=false
      })
    }
  }, 
  created() {
    let id_1= Math.floor(Math.random() * (51 - 1) + 1);
    this.getpaihan_list_1(id_1)
    this.getpaihan_list_2(id_1)
  }
};
</script>

<style type="text/css">
.clear{
        clear:both;
    }
.paihan{
    width: 68%;
        margin: 0;
    padding: 0;
   margin-left: 15%;
}
.lc-title-floor {
  position: relative;
}
.lc-title-floor > .img {
  width: 100%;
  height: 100%;
  line-height: 0;
}
.lc-title-floor > .txt .main__subtitle {
  color: #343639;
  font-size: 14px;
  font-weight: lighter;
}
.lc-title-floor .lc-title-floor__txt {
  padding: 0 30px;
}
.lc-title-floor .lc-title-floor__txt--subtitle {
  height: 80px;
}
.lc-title-floor .lc-title-floor__txt--subtitle .lc-title-floor__title {
  margin-top: 15px;
  height: 33px;
  line-height: 33px;
}
.lc-title-floor .lc-title-floor__txt--left {
  text-align: left;
}
.lc-title-floor .lc-title-floor__txt--center {
  text-align: center;
}
.lc-title-floor .lc-title-floor__txt--right {
  text-align: right;
}
.lc-title-floor--img {
  line-height: 0;
}
.lc-title-floor__title {
  font-size: 24px;
  position: relative;
  display: inline-block;
  height: 100%;
  line-height: 50px;
}
.lc-title-floor__title .title__icon {
  left: 0;
  top: 50%;
  width: 22px;
  height: 22px;
  position: absolute;
  transform: translateY(-50%);
}
.lc-title-floor__title .title__info {
  font-size: inherit;
  padding-left: 0;
  display: inline-block;
}
.lc-title-floor__title--icon .title__info {
  padding-left: 31px;
}
.lc-title-floor__link {
  font-size: 14px;
  position: absolute;
  top: 50%;
  right: 30px;
  color: #343639;
  transform: translateY(-50%);
  cursor: pointer;
}
.lc-title-floor__link::after {
  content: " ";
  position: absolute;
  width: 14px;
  height: 14px;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.lc-row {
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 100% auto;
}
.lc-row--lg {
  margin-right: -10px;
}
.lc-row {
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 100% auto;
}
.lc-row--lg {
  margin-right: -10px;
}


.l-icon {
  font-family: "QuarkIcon";
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.l-icon-lujing::before {
  content: "\ebe4";
}
.l-icon-share::before {
  content: "\f223";
}
.l-icon-arrow-left::before {
  content: "\ed46";
}
.l-icon-arrow-up::before {
  content: "\e87c";
}
.l-icon-arrow-down::before {
  content: "\f29a";
}
.l-icon-articleicon::before {
  content: "\e7d2";
}
.l-icon-back-top::before {
  content: "\e094";
}
.l-icon-arrow-right::before {
  content: "\e44e";
}
.l-icon-CombinedShapeCopy::before {
  content: "\f02e";
}
.l-icon-beans::before {
  content: "\ede8";
}
.l-icon-clock::before {
  content: "\ed8c";
}
.l-icon-cart::before {
  content: "\e0fb";
}
.l-icon-fire::before {
  content: "\f37e";
}
.l-icon-eye::before {
  content: "\e332";
}
.l-icon-close-circle::before {
  content: "\e8a1";
}
.l-icon-more-circle::before {
  content: "\f1df";
}
.l-icon-heart::before {
  content: "\e52d";
}
.l-icon-location::before {
  content: "\e54a";
}
.l-icon-search-2::before {
  content: "\e73d";
}
.l-icon-comment::before {
  content: "\e543";
}
.l-icon-more::before {
  content: "\ed71";
}
.l-icon-search::before {
  content: "\f48f";
}
.lc-row::before,
.lc-row::after {
  content: " ";
  display: table;
}
.lc-row::after {
  clear: both;
}
.lc-row--lg {
  margin-right: -11px;
}
.lc-row--lg .lc-col {
  padding-right: 10px;
}
.lc-row--md {
  margin-right: -11px;
}
.lc-row--md .lc-col {
  padding-right: 10px;
}
.lc-col {
  box-sizing: border-box;
  position: relative;
  float: left;
  min-height: 1px;
}
.lc-col--cols6-1 {
  width: 16.666%;
}
.lc-col--cols6-2 {
  width: 33.333%;
}
.lc-col--cols6-3 {
  width: 50%;
}
.lc-col--cols6-4 {
  width: 66.667%;
}
.lc-col--cols6-5 {
  width: 83.334%;
}
.lc-col--cols5-1 {
  width: 20%;
}
.lc-col--cols5-2 {
  width: 40%;
}
.lc-col--cols5-3 {
  width: 60%;
}
.lc-col--cols5-4 {
  width: 80%;
}
.lc-col--cols4-1 {
  width: 25%;
}
.lc-col--cols4-2 {
  width: 50%;
}
.lc-col--cols4-3 {
  width: 75%;
}
.lc-col--cols3-1 {
  width: 33.333%;
}
.lc-col--cols3-2 {
  width: 66.667%;
}
.lc-col--cols2-1 {
  width: 50%;
}
.lc-col--no-gutter {
  padding-right: 0 !important;
}
.lc-col--cols-full {
  width: 100%;
 
}
.quark-col--lg-cols6-1 {
  margin-left: 10px;
  width: 190px;
}
.quark-col--lg-cols6-2 {
  margin-left: 10px;
  width: 390px;
}
.quark-col--lg-cols6-3 {
  margin-left: 10px;
  width: 590px;
}
.quark-col--lg-cols6-4 {
  margin-left: 10px;
  width: 790px;
}
.quark-col--lg-cols6-5 {
  margin-left: 10px;
  width: 990px;
}
.quark-col--lg-cols5-1 {
  margin-left: 10px;
  width: 230px;
}
.quark-col--lg-cols5-2 {
  margin-left: 10px;
  width: 470px;
}
.quark-col--lg-cols5-3 {
  margin-left: 10px;
  width: 710px;
}
.quark-col--lg-cols5-4 {
  margin-left: 10px;
  width: 950px;
}
.quark-col--lg-cols4-1 {
  margin-left: 10px;
  width: 290px;
}
.quark-col--lg-cols4-2 {
  margin-left: 10px;
  width: 590px;
}
.quark-col--lg-cols4-3 {
  margin-left: 10px;
  width: 890px;
}
.quark-col--lg-cols3-1 {
  margin-left: 10px;
  width: 390px;
}
.quark-col--lg-cols3-2 {
  margin-left: 10px;
  width: 790px;
}
.quark-col--lg-cols2-1 {
  margin-left: 10px;
  width: 590px;
}
.quark-col--lg-cols-full {
  margin-left: 10px;
  width: 1190px;
}
.quark-col--md-cols6-1 {
  margin-left: 10px;
  width: 156.66667px;
}
.quark-col--md-cols6-2 {
  margin-left: 10px;
  width: 323.33333px;
}
.quark-col--md-cols6-3 {
  margin-left: 10px;
  width: 490px;
}
.quark-col--md-cols6-4 {
  margin-left: 10px;
  width: 656.66667px;
}
.quark-col--md-cols6-5 {
  margin-left: 10px;
  width: 823.33333px;
}
.quark-col--md-cols5-1 {
  margin-left: 10px;
  width: 190px;
}
.quark-col--md-cols5-2 {
  margin-left: 10px;
  width: 390px;
}
.quark-col--md-cols5-3 {
  margin-left: 10px;
  width: 590px;
}
.quark-col--md-cols5-4 {
  margin-left: 10px;
  width: 790px;
}
.quark-col--md-cols4-1 {
  margin-left: 10px;
  width: 240px;
}
.quark-col--md-cols4-2 {
  margin-left: 10px;
  width: 490px;
}
.quark-col--md-cols4-3 {
  margin-left: 10px;
  width: 740px;
}
.quark-col--md-cols3-1 {
  margin-left: 10px;
  width: 323.33333px;
}
.quark-col--md-cols3-2 {
  margin-left: 10px;
  width: 656.66667px;
}
.quark-col--md-cols2-1 {
  margin-left: 10px;
  width: 490px;
}
.quark-col--md-cols-full {
  margin-left: 10px;
  width: 990px;
}
.quark-row {
  margin-left: -10px;
}
.quark-row::before,
.quark-row::after {
  content: " ";
  display: table;
}
.quark-row::after {
  clear: both;
}
.quark-row::before,
.quark-row::after {
  content: " ";
  display: table;
}
.quark-row::after {
  clear: both;
}
.quark-row--no-gutter {
  margin-left: 0 !important;
}
.quark-row--no-gutter .quark-col {
  margin-left: 0 !important;
}
.quark-col {
  box-sizing: border-box;
  position: relative;
  float: left;
  min-height: 1px;
}
.lc-ad-base__list--lg .lc-ad-base__item--cols6-1 {
  width: 190px;
}
.lc-ad-base__list--lg .lc-ad-base__item--cols6-2 {
  width: 390px;
}
.lc-ad-base__list--lg .lc-ad-base__item--cols6-3 {
  width: 590px;
}
.lc-ad-base__list--lg .lc-ad-base__item--cols6-4 {
  width: 790px;
}
.lc-ad-base__list--lg .lc-ad-base__item--cols6-5 {
  width: 990px;
}
.lc-ad-base__list--lg .lc-ad-base__item--cols5-1 {
  width: 230px;
}
.lc-ad-base__list--lg .lc-ad-base__item--cols5-2 {
  width: 470px;
}
.lc-ad-base__list--lg .lc-ad-base__item--cols5-3 {
  width: 710px;
}
.lc-ad-base__list--lg .lc-ad-base__item--cols5-4 {
  width: 950px;
}
.lc-ad-base__list--lg .lc-ad-base__item--cols4-1 {
  width: 290px;
}
.lc-ad-base__list--lg .lc-ad-base__item--cols4-2 {
  width: 590px;
}
.lc-ad-base__list--lg .lc-ad-base__item--cols4-3 {
  width: 890px;
}
.lc-ad-base__list--lg .lc-ad-base__item--cols3-1 {
  width: 390px;
}
.lc-ad-base__list--lg .lc-ad-base__item--cols3-2 {
  width: 790px;
}
.lc-ad-base__list--lg .lc-ad-base__item--cols2-1 {
  width: 590px;
}
.lc-ad-base__list--lg .lc-ad-base__item--cols-full {
  width: 1190px;
}
.lc-ad-base__list--md .lc-ad-base__item--cols6-1 {
  width: 156.66667px;
}
.lc-ad-base__list--md .lc-ad-base__item--cols6-2 {
  width: 323.33333px;
}
.lc-ad-base__list--md .lc-ad-base__item--cols6-3 {
  width: 490px;
}
.lc-ad-base__list--md .lc-ad-base__item--cols6-4 {
  width: 656.66667px;
}
.lc-ad-base__list--md .lc-ad-base__item--cols6-5 {
  width: 823.33333px;
}
.lc-ad-base__list--md .lc-ad-base__item--cols5-1 {
  width: 190px;
}
.lc-ad-base__list--md .lc-ad-base__item--cols5-2 {
  width: 390px;
}
.lc-ad-base__list--md .lc-ad-base__item--cols5-3 {
  width: 590px;
}
.lc-ad-base__list--md .lc-ad-base__item--cols5-4 {
  width: 790px;
}
.lc-ad-base__list--md .lc-ad-base__item--cols4-1 {
  width: 240px;
}
.lc-ad-base__list--md .lc-ad-base__item--cols4-2 {
  width: 490px;
}
.lc-ad-base__list--md .lc-ad-base__item--cols4-3 {
  width: 740px;
}
.lc-ad-base__list--md .lc-ad-base__item--cols3-1 {
  width: 323.33333px;
}
.lc-ad-base__list--md .lc-ad-base__item--cols3-2 {
  width: 656.66667px;
}
.lc-ad-base__list--md .lc-ad-base__item--cols2-1 {
  width: 490px;
}
.lc-ad-base__list--md .lc-ad-base__item--cols-full {
  width: 990px;
}
.lc-ad-base__list::before,
.lc-ad-base__list::after {
  content: " ";
  display: table;
}
.lc-ad-base__list::after {
  clear: both;
}
.lc-ad-base__list::before,
.lc-ad-base__list::after {
  content: " ";
  display: table;
}
.lc-ad-base__list::after {
  clear: both;
}
.lc-ad-base__list--lg {
  margin-left: -11px;
}
.lc-ad-base__list--md {
  margin-left: -11px;
}
.lc-ad-base__list--no-gutter {
  margin-left: 0 !important;
}
.lc-ad-base__list--no-gutter > [class*="--cols"] {
  margin-left: 0 !important;
}
.lc-ad-base__list--lg .lc-ad-base__item {
  margin-left: 10px;
}
.lc-ad-base__list--md .lc-ad-base__item {
  margin-left: 10px;
}
.lc-ad-base__list .lc-ad-base__item {
  box-sizing: border-box;
  position: relative;
  float: left;
  min-height: 1px;
}
.lc-ad-base {
  overflow: hidden;
}
.lc-ad-base__list {
  margin-bottom: -10px;
  font-size: 0;
}
.lc-ad-base__item {
  cursor: pointer;
  overflow: hidden;
  margin-bottom: 10px;
  float: none !important;
  height: auto;
  display: inline-block;
  -webkit-text-size-adjust: none;
  vertical-align: bottom;
}
.lc-ad-base__item img {
  display: block;
  width: 100%;
  height: auto;
}

.lc-title-floor {
  position: relative;
}
.lc-title-floor > .img {
  width: 100%;
  height: 100%;
  line-height: 0;
}
.lc-title-floor > .txt .main__subtitle {
  color: #343639;
  font-size: 14px;
  font-weight: lighter;
}
.lc-title-floor .lc-title-floor__txt {
  padding: 0 30px;
}
.lc-title-floor .lc-title-floor__txt--subtitle {
  height: 80px;
}
.lc-title-floor .lc-title-floor__txt--subtitle .lc-title-floor__title {
  margin-top: 15px;
  height: 33px;
  line-height: 33px;
}
.lc-title-floor .lc-title-floor__txt--left {
  text-align: left;
}
.lc-title-floor .lc-title-floor__txt--center {
  text-align: center;
}
.lc-title-floor .lc-title-floor__txt--right {
  text-align: right;
}
.lc-title-floor--img {
  line-height: 0;
}
.lc-title-floor__title {
  font-size: 24px;
  position: relative;
  display: inline-block;
  height: 100%;
  line-height: 50px;
}
.lc-title-floor__title .title__icon {
  left: 0;
  top: 50%;
  width: 22px;
  height: 22px;
  position: absolute;
  transform: translateY(-50%);
}
.lc-title-floor__title .title__info {
  font-size: inherit;
  padding-left: 0;
  display: inline-block;
}
.lc-title-floor__title--icon .title__info {
  padding-left: 31px;
}
.lc-title-floor__link {
  font-size: 14px;
  position: absolute;
  top: 50%;
  right: 30px;
  color: #343639;
  transform: translateY(-50%);
  cursor: pointer;
}
.lc-title-floor__link::after {
  content: " ";
  position: absolute;
  width: 14px;
  height: 14px;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.lc-goods-rank__container--lg .lc-goods-rank__inner--cols6-1 {
  width: 190px;
}
.lc-goods-rank__container--lg .lc-goods-rank__inner--cols6-2 {
  width: 390px;
}
.lc-goods-rank__container--lg .lc-goods-rank__inner--cols6-3 {
  width: 590px;
}
.lc-goods-rank__container--lg .lc-goods-rank__inner--cols6-4 {
  width: 790px;
}
.lc-goods-rank__container--lg .lc-goods-rank__inner--cols6-5 {
  width: 990px;
}
.lc-goods-rank__container--lg .lc-goods-rank__inner--cols5-1 {
  width: 230px;
}
.lc-goods-rank__container--lg .lc-goods-rank__inner--cols5-2 {
  width: 470px;
}
.lc-goods-rank__container--lg .lc-goods-rank__inner--cols5-3 {
  width: 710px;
}
.lc-goods-rank__container--lg .lc-goods-rank__inner--cols5-4 {
  width: 950px;
}
.lc-goods-rank__container--lg .lc-goods-rank__inner--cols4-1 {
  width: 290px;
}
.lc-goods-rank__container--lg .lc-goods-rank__inner--cols4-2 {
  width: 590px;
}
.lc-goods-rank__container--lg .lc-goods-rank__inner--cols4-3 {
  width: 890px;
}
.lc-goods-rank__container--lg .lc-goods-rank__inner--cols3-1 {
  width: 390px;
}
.lc-goods-rank__container--lg .lc-goods-rank__inner--cols3-2 {
  width: 790px;
}
.lc-goods-rank__container--lg .lc-goods-rank__inner--cols2-1 {
  width: 590px;
}
.lc-goods-rank__container--lg .lc-goods-rank__inner--cols-full {
  width: 1190px;
}
.lc-goods-rank__container--md .lc-goods-rank__inner--cols6-1 {
  width: 156.66667px;
}
.lc-goods-rank__container--md .lc-goods-rank__inner--cols6-2 {
  width: 323.33333px;
}
.lc-goods-rank__container--md .lc-goods-rank__inner--cols6-3 {
  width: 490px;
}
.lc-goods-rank__container--md .lc-goods-rank__inner--cols6-4 {
  width: 656.66667px;
}
.lc-goods-rank__container--md .lc-goods-rank__inner--cols6-5 {
  width: 823.33333px;
}
.lc-goods-rank__container--md .lc-goods-rank__inner--cols5-1 {
  width: 190px;
}
.lc-goods-rank__container--md .lc-goods-rank__inner--cols5-2 {
  width: 390px;
}
.lc-goods-rank__container--md .lc-goods-rank__inner--cols5-3 {
  width: 590px;
}
.lc-goods-rank__container--md .lc-goods-rank__inner--cols5-4 {
  width: 790px;
}
.lc-goods-rank__container--md .lc-goods-rank__inner--cols4-1 {
  width: 240px;
}
.lc-goods-rank__container--md .lc-goods-rank__inner--cols4-2 {
  width: 490px;
}
.lc-goods-rank__container--md .lc-goods-rank__inner--cols4-3 {
  width: 740px;
}
.lc-goods-rank__container--md .lc-goods-rank__inner--cols3-1 {
  width: 323.33333px;
}
.lc-goods-rank__container--md .lc-goods-rank__inner--cols3-2 {
  width: 656.66667px;
}
.lc-goods-rank__container--md .lc-goods-rank__inner--cols2-1 {
  width: 490px;
}
.lc-goods-rank__container--md .lc-goods-rank__inner--cols-full {
  width: 990px;
}
.lc-goods-rank__name {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.lc-goods-rank__container::before,
.lc-goods-rank__container::after {
  content: " ";
  display: table;
}
.lc-goods-rank__container::after {
  clear: both;
}
.lc-goods-rank__container::before,
.lc-goods-rank__container::after {
  content: " ";
  display: table;
}
.lc-goods-rank__container::after {
  clear: both;
}
.lc-goods-rank__container--lg {
  margin-left: -11px;
}
.lc-goods-rank__container--md {
  margin-left: -11px;
}
.lc-goods-rank__container--no-gutter {
  margin-left: 0 !important;
}
.lc-goods-rank__container--no-gutter > [class*="--cols"] {
  margin-left: 0 !important;
}
.lc-goods-rank__container--lg .lc-goods-rank__inner {
  margin-left: 10px;
}
.lc-goods-rank__container--md .lc-goods-rank__inner {
  margin-left: 10px;
}
.lc-goods-rank__container .lc-goods-rank__inner {
  box-sizing: border-box;
  position: relative;
  float: left;
  min-height: 1px;
}
.lc-goods-rank {
  color: #232321;
  overflow: hidden;
}
.lc-goods-rank * {
  box-sizing: content-box;
}
.lc-goods-rank__hd {
  height: 36px;
  line-height: 36px;
  font-size: 14px;
}
.lc-goods-rank__hd::before {
  content: "";
  width: 18px;
  height: 18px;
  display: inline-block;
  margin: -2px 5px 0 0;
  vertical-align: middle;
  background: url("")
    no-repeat;
  background-size: 100%;
}
.lc-goods-rank__tab {
  width: 100%;
}
.lc-goods-rank__tab-nav {
  height: 34px;
}
.lc-goods-rank__tab-nav::before,
.lc-goods-rank__tab-nav::after {
  content: " ";
  display: table;
}
.lc-goods-rank__tab-nav::after {
  clear: both;
}
.lc-goods-rank__tab-nav-item {
  box-sizing: border-box;
  float: left;
  padding: 0 10px;
  height: 100%;
  font-size: 14px;
  line-height: 34px;
  text-align: center;
  cursor: default;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lc-goods-rank__tab-nav-item--half {
  width: 50%;
}
.lc-goods-rank__tab-nav-item--three {
  width: 33.33%;
}
.lc-goods-rank__tab-nav-item--on {
  color: #e62a29;
}
.lc-goods-rank__list-box {
  position: relative;
}
.lc-goods-rank__list {
  transition: opacity 0.5s ease;
}
.lc-goods-rank__item {
  background: #fff;
  cursor: pointer;
}
.lc-goods-rank__item:hover .lc-goods-rank__img img {
  opacity: 0.8;
}
.lc-goods-rank__order {
  z-index: 1;
}
.lc-goods-rank__img img {
  height: 100%;
  width: 100%;
}
.lc-goods-rank__info {
  overflow: hidden;
      margin-left: 31px;
}
.lc-goods-rank__price-row {
    margin-top: 13px;
}
.lc-goods-rank__price {
  display: inline-block;
  color: #232321;
  margin-right: 5px;
  font-size: 12px;
}
.lc-goods-rank__price-plus {
  position: relative;
  color: #000;
  font-size: 12px;
}
.lc-goods-rank__price-plus::after {
  content: "";
  position: absolute;
  bottom: 6px;
  width: 20px;
  height: 8px;
  background: url("")
    no-repeat center;
  background-size: 20px 8px;
}
.lc-goods-rank__price-backstage {
  color: #bec2c6;
  font-size: 12px;
}
.lc-goods-rank__price-backstage > span {
  text-decoration: line-through;
}
.lc-goods-rank__name {
  height: 36px;
  line-height: 18px;
  margin-bottom: 5px;
}
.lc-goods-rank__price i {
  font-style: normal;
  margin-right: 3px;
}
.lc-goods-rank .l-icon-comment {
  margin-right: 5px;
}
.lc-goods-rank__good-rate {
  height: 18px;
  line-height: 18px;
  font-size: 12px;
  color: #85878c;
}
.lc-goods-rank__comment-count {
  display: inline-block;
  position: relative;
  font-size: 12px;
}
.lc-goods-rank__comment-count .l-icon-comment {
  margin-right: 5px;
}
.lc-goods-rank__inner {
  position: relative;
}
.lc-goods-rank__inner--layout1 {
  background: #fff;
}
.lc-goods-rank__inner--layout1 .lc-goods-rank__hd {
  margin: 0 15px;
  border-bottom: 1px solid #f5f6f8;
}
.lc-goods-rank__inner--layout1 .lc-goods-rank__list {
  padding: 0 15px;
}
.lc-goods-rank__inner--layout1 .lc-goods-rank__order {
  position: absolute;
  top: 10px;
  left: 0;
  font-size: 12px;
}
.lc-goods-rank__inner--layout1 .lc-goods-rank__img {
  display: none;
  float: left;
  width: 70px;
  height: 70px;
  margin-right: 15px;
}
.lc-goods-rank__inner--layout1 .lc-goods-rank__img img {
  height: 100%;
  width: 100%;
}
.lc-goods-rank__inner--layout1 .lc-goods-rank__item {
  position: relative;
  padding: 10px 0 10px 20px;
  height: 60px;
  border-top: 1px solid #f5f6f8;
}
.lc-goods-rank__inner--layout1 .lc-goods-rank__item:hover .lc-goods-rank__name {
  color: #c81923;
}
.lc-goods-rank__inner--layout1 .lc-goods-rank__item--top {
  height: 70px;
  width: 100%;
  padding-left: 0;
  border-top: 0;
}
.lc-goods-rank__inner--layout1 .lc-goods-rank__item--top .lc-goods-rank__img {
  display: block;
}
.lc-goods-rank__inner--layout1 .lc-goods-rank__item--top .lc-goods-rank__name {
  margin-bottom: -10px;
}
.lc-goods-rank__inner--layout1 .lc-goods-rank__item--top .lc-goods-rank__order {
  position: absolute;
  top: 15px;
  left: -4px;
  width: 23px;
  height: 17px;
  line-height: 15px;
  text-align: center;
  color: rgb(255, 255, 255);
  background-repeat: no-repeat;
  background-size: 100%;
}
.lc-goods-rank__inner--layout1
  .lc-goods-rank__item--top
  .lc-goods-rank__order-1 {
  background-image: url("");
}
.lc-goods-rank__inner--layout1
  .lc-goods-rank__item--top
  .lc-goods-rank__order-2 {
  background-image: url("");
}
.lc-goods-rank__inner--layout1
  .lc-goods-rank__item--top
  .lc-goods-rank__order-3 {
  background-image: url("");
}
.lc-goods-rank__inner--layout2 {
  overflow: hidden;
  padding: 10px 20px 0;
  background: #fff;
}
.lc-goods-rank__inner--layout2 .lc-goods-rank__hd {
  margin-bottom: 9px;
}
.lc-goods-rank__inner--layout2 .lc-goods-rank__info {
  position: relative;
  padding: 5px 0;
  height: 110px;
  overflow: hidden;
}
.lc-goods-rank__inner--layout2 .lc-goods-rank__list {
  margin-right: -20px;
}
.lc-goods-rank__inner--layout2 .lc-goods-rank__list::before,
.lc-goods-rank__inner--layout2 .lc-goods-rank__list::after {
  content: " ";
  display: table;
}
.lc-goods-rank__inner--layout2 .lc-goods-rank__list::after {
  clear: both;
}
.lc-goods-rank__inner--layout2 .lc-goods-rank__comment-info {
  position: absolute;
  left: 0;
  bottom: 5px;
}
.lc-goods-rank__inner--layout2 .lc-goods-rank__price {
  display: block;
}
.lc-goods-rank__inner--layout2 .lc-goods-rank__order {
  position: absolute;
  top: 15px;
  left: -4px;
  width: 23px;
  height: 17px;
  line-height: 15px;
  text-align: center;
  color: #fff;
  background-repeat: no-repeat;
  background-size: 100%;
  background-image: url("");
}
.lc-goods-rank__inner--layout2 .lc-goods-rank__order-1 {
  background-image: url("");
}
.lc-goods-rank__inner--layout2 .lc-goods-rank__order-2 {
  background-image: url("");
}
.lc-goods-rank__inner--layout2 .lc-goods-rank__order-3 {
  background-image: url("");
}
.lc-goods-rank__inner--layout2 .lc-goods-rank__item {
  position: relative;
  float: left;
  width: 360px;
  height: 120px;
  margin-right: 20px;
  padding-bottom: 15px;
}
.lc-goods-rank__inner--layout2 .lc-goods-rank__item::before,
.lc-goods-rank__inner--layout2 .lc-goods-rank__item::after {
  content: " ";
  display: table;
}
.lc-goods-rank__inner--layout2 .lc-goods-rank__item::after {
  clear: both;
}
.lc-goods-rank__inner--layout2 .lc-goods-rank__item:hover .lc-goods-rank__name {
  color: #c81923;
}
.lc-goods-rank__inner--layout2 .lc-goods-rank__img {
  float: left;
  margin-right: 10px;
  width: 120px;
  height: 120px;
}
.lc-goods-rank__inner--layout3 .lc-goods-rank__list {
  margin-right: -10px;
  margin-bottom: -10px;
}
.lc-goods-rank__inner--layout3 .lc-goods-rank__list::before,
.lc-goods-rank__inner--layout3 .lc-goods-rank__list::after {
  content: " ";
  display: table;
}
.lc-goods-rank__inner--layout3 .lc-goods-rank__list::after {
  clear: both;
}
.lc-goods-rank__inner--layout3 .lc-goods-rank__good-rate {
  width: 100px;
  height: 23px;
  border: 1px solid #ff96a9;
  color: #ff2d54;
  line-height: 23px;
  text-align: center;
  border-radius: 25px;
}
.lc-goods-rank__inner--layout3 .lc-goods-rank__good-rate::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
  width: 12px;
  height: 11px;
  background: url("")
    no-repeat;
  background-size: 100%;
}
.lc-goods-rank__inner--layout3 .lc-goods-rank__item {
  position: relative;
  float: left;
  width: 190px;
  height: 280px;
  overflow: hidden;
  margin: 0 10px 10px 0;
  transition: transform 0.3s ease-in-out;
}
.lc-goods-rank__inner--layout3 .lc-goods-rank__item:hover {
  transform: translateY(-5px);
}
.lc-goods-rank__inner--layout3 .lc-goods-rank__item--nth1 {
  width: 390px;
}
.lc-goods-rank__inner--layout3 .lc-goods-rank__item--nth1 .lc-goods-rank__img {
  height: 120px;
  padding: 20px 0;
  background-color: #f42d54;
}
.lc-goods-rank__inner--layout3
  .lc-goods-rank__item--nth1
  .lc-goods-rank__img
  img {
  width: 120px;
  height: 120px;
  border-radius: 120px;
}
.lc-goods-rank__inner--layout3 .lc-goods-rank__item--nth1 .lc-goods-rank__info {
  padding-left: 75px;
}
.lc-goods-rank__inner--layout3
  .lc-goods-rank__item--nth1
  .lc-goods-rank__comment-info {
  left: 75px;
}
.lc-goods-rank__inner--layout3
  .lc-goods-rank__item--nth1
  .lc-goods-rank__order {
  left: 0;
  font-size: 74px;
  width: 75px;
  text-align: center;
  opacity: 1;
}
.lc-goods-rank__inner--layout3
  .lc-goods-rank__item--nth2
  .lc-goods-rank__order {
  opacity: 0.8;
}
.lc-goods-rank__inner--layout3
  .lc-goods-rank__item--nth3
  .lc-goods-rank__order {
  opacity: 0.6;
}
.lc-goods-rank__inner--layout3
  .lc-goods-rank__item--nth4
  .lc-goods-rank__order {
  opacity: 0.4;
}
.lc-goods-rank__inner--layout3 .lc-goods-rank__comment-info {
  position: absolute;
  left: 50px;
  top: 10px;
}
.lc-goods-rank__inner--layout3 .lc-goods-rank__order {
  position: absolute;
  left: -10px;
  top: 160px;
  color: #f42d54;
  font-size: 72px;
  height: 120px;
  line-height: 120px;
  font-weight: bolder;
  opacity: 0.2;
}
.lc-goods-rank__inner--layout3 .lc-goods-rank__info {
  position: relative;
  padding-left: 50px;
  padding-top: 45px;
  height: 120px;
  overflow: hidden;
}
.lc-goods-rank__inner--layout3 .lc-goods-rank__img {
  height: 160px;
}
.lc-goods-rank__inner--layout3 .lc-goods-rank__img img {
  display: block;
  margin: 0 auto;
  width: 160px;
  height: 100%;
}
.lc-goods-rank__container--lg .lc-goods-rank__inner--cols6-1 {
  width: 190px;
}
.lc-goods-rank__container--lg .lc-goods-rank__inner--cols6-2 {
  width: 390px;
}
.lc-goods-rank__container--lg .lc-goods-rank__inner--cols6-3 {
  width: 590px;
}
.lc-goods-rank__container--lg .lc-goods-rank__inner--cols6-4 {
  width: 790px;
}
.lc-goods-rank__container--lg .lc-goods-rank__inner--cols6-5 {
  width: 990px;
}
.lc-goods-rank__container--lg .lc-goods-rank__inner--cols5-1 {
  width: 230px;
}
.lc-goods-rank__container--lg .lc-goods-rank__inner--cols5-2 {
  width: 470px;
}
.lc-goods-rank__container--lg .lc-goods-rank__inner--cols5-3 {
  width: 710px;
}
.lc-goods-rank__container--lg .lc-goods-rank__inner--cols5-4 {
  width: 950px;
}
.lc-goods-rank__container--lg .lc-goods-rank__inner--cols4-1 {
  width: 290px;
}
.lc-goods-rank__container--lg .lc-goods-rank__inner--cols4-2 {
  width: 590px;
}
.lc-goods-rank__container--lg .lc-goods-rank__inner--cols4-3 {
  width: 890px;
}
.lc-goods-rank__container--lg .lc-goods-rank__inner--cols3-1 {
  width: 390px;
}
.lc-goods-rank__container--lg .lc-goods-rank__inner--cols3-2 {
  width: 790px;
}
.lc-goods-rank__container--lg .lc-goods-rank__inner--cols2-1 {
  width: 590px;
}
.lc-goods-rank__container--lg .lc-goods-rank__inner--cols-full {
  width: 1190px;
}
.lc-goods-rank__container--md .lc-goods-rank__inner--cols6-1 {
  width: 156.66667px;
}
.lc-goods-rank__container--md .lc-goods-rank__inner--cols6-2 {
  width: 323.33333px;
}
.lc-goods-rank__container--md .lc-goods-rank__inner--cols6-3 {
  width: 490px;
}
.lc-goods-rank__container--md .lc-goods-rank__inner--cols6-4 {
  width: 656.66667px;
}
.lc-goods-rank__container--md .lc-goods-rank__inner--cols6-5 {
  width: 823.33333px;
}
.lc-goods-rank__container--md .lc-goods-rank__inner--cols5-1 {
  width: 190px;
}
.lc-goods-rank__container--md .lc-goods-rank__inner--cols5-2 {
  width: 390px;
}
.lc-goods-rank__container--md .lc-goods-rank__inner--cols5-3 {
  width: 590px;
}
.lc-goods-rank__container--md .lc-goods-rank__inner--cols5-4 {
  width: 790px;
}
.lc-goods-rank__container--md .lc-goods-rank__inner--cols4-1 {
  width: 240px;
}
.lc-goods-rank__container--md .lc-goods-rank__inner--cols4-2 {
  width: 490px;
}
.lc-goods-rank__container--md .lc-goods-rank__inner--cols4-3 {
  width: 740px;
}
.lc-goods-rank__container--md .lc-goods-rank__inner--cols3-1 {
  width: 323.33333px;
}
.lc-goods-rank__container--md .lc-goods-rank__inner--cols3-2 {
  width: 656.66667px;
}
.lc-goods-rank__container--md .lc-goods-rank__inner--cols2-1 {
  width: 490px;
}
.lc-goods-rank__container--md .lc-goods-rank__inner--cols-full {
  width: 990px;
}
.lc-goods-rank__name {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.lc-goods-rank__container::before,
.lc-goods-rank__container::after {
  content: " ";
  display: table;
}
.lc-goods-rank__container::after {
  clear: both;
}
.lc-goods-rank__container::before,
.lc-goods-rank__container::after {
  content: " ";
  display: table;
}
.lc-goods-rank__container::after {
  clear: both;
}
.lc-goods-rank__container--lg {
  margin-left: -11px;
}
.lc-goods-rank__container--md {
  margin-left: -11px;
}
.lc-goods-rank__container--no-gutter {
  margin-left: 0 !important;
}
.lc-goods-rank__container--no-gutter > [class*="--cols"] {
  margin-left: 0 !important;
}
.lc-goods-rank__container--lg .lc-goods-rank__inner {
  margin-left: 10px;
}
.lc-goods-rank__container--md .lc-goods-rank__inner {
  margin-left: 10px;
}
.lc-goods-rank__container .lc-goods-rank__inner {
  box-sizing: border-box;
  position: relative;
  float: left;
  min-height: 1px;
}
.lc-goods-rank {
  color: #232321;
  overflow: hidden;
}
.lc-goods-rank * {
  box-sizing: content-box;
}
.lc-goods-rank__hd {
  height: 36px;
  line-height: 36px;
  font-size: 14px;
}
.lc-goods-rank__hd::before {
  content: "";
  width: 18px;
  height: 18px;
  display: inline-block;
  margin: -2px 5px 0 0;
  vertical-align: middle;
  background: url("")
    no-repeat;
  background-size: 100%;
}
.lc-goods-rank__tab {
  width: 100%;
}
.lc-goods-rank__tab-nav {
  height: 34px;
}
.lc-goods-rank__tab-nav::before,
.lc-goods-rank__tab-nav::after {
  content: " ";
  display: table;
}
.lc-goods-rank__tab-nav::after {
  clear: both;
}
.lc-goods-rank__tab-nav-item {
  box-sizing: border-box;
  float: left;
  padding: 0 10px;
  height: 100%;
  font-size: 14px;
  line-height: 34px;
  text-align: center;
  cursor: default;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lc-goods-rank__tab-nav-item--half {
  width: 50%;
}
.lc-goods-rank__tab-nav-item--three {
  width: 33.33%;
}
.lc-goods-rank__tab-nav-item--on {
  color: #e62a29;
}
.lc-goods-rank__list-box {
  position: relative;
}
.lc-goods-rank__list {
  transition: opacity 0.5s ease;
}
.lc-goods-rank__item {
  background: #fff;
  cursor: pointer;
}
.lc-goods-rank__item:hover .lc-goods-rank__img img {
  opacity: 0.8;
}
.lc-goods-rank__order {
  z-index: 1;
}
.lc-goods-rank__img img {
  height: 100%;
  width: 100%;
}
.lc-goods-rank__info {
  overflow: hidden;
}
.lc-goods-rank__price-row {
  margin-top: 5px;
}
.lc-goods-rank__price {
  display: inline-block;
  color: #232321;
  margin-right: 5px;
  font-size: 12px;
}
.lc-goods-rank__price-plus {
  position: relative;
  color: #000;
  font-size: 12px;
}
.lc-goods-rank__price-plus::after {
  content: "";
  position: absolute;
  bottom: 6px;
  width: 20px;
  height: 8px;
  background: url("")
    no-repeat center;
  background-size: 20px 8px;
}
.lc-goods-rank__price-backstage {
  color: #bec2c6;
  font-size: 12px;
}
.lc-goods-rank__price-backstage > span {
  text-decoration: line-through;
}
.lc-goods-rank__name {
  height: 36px;
  line-height: 18px;
  margin-bottom: 5px;
}
.lc-goods-rank__price i {
  font-style: normal;
  margin-right: 3px;
}
.lc-goods-rank .l-icon-comment {
  margin-right: 5px;
}
.lc-goods-rank__good-rate {
  height: 18px;
  line-height: 18px;
  font-size: 12px;
  color: #85878c;
}
.lc-goods-rank__comment-count {
  display: inline-block;
  position: relative;
  font-size: 12px;
}
.lc-goods-rank__comment-count .l-icon-comment {
  margin-right: 5px;
}
.lc-goods-rank__inner {
  position: relative;
}
.lc-goods-rank__inner--layout1 {
  background: #fff;
}
.lc-goods-rank__inner--layout1 .lc-goods-rank__hd {
  margin: 0 15px;
  border-bottom: 1px solid #f5f6f8;
}
.lc-goods-rank__inner--layout1 .lc-goods-rank__list {
  padding: 0 15px;
}
.lc-goods-rank__inner--layout1 .lc-goods-rank__order {
  position: absolute;
  top: 10px;
  left: 0;
  font-size: 12px;
}
.lc-goods-rank__inner--layout1 .lc-goods-rank__img {
  display: none;
  float: left;
  width: 70px;
  height: 70px;
  margin-right: 15px;
}
.lc-goods-rank__inner--layout1 .lc-goods-rank__img img {
  height: 100%;
  width: 100%;
}
.lc-goods-rank__inner--layout1 .lc-goods-rank__item {
  position: relative;
  padding: 10px 0 10px 20px;
  height: 60px;
  border-top: 1px solid #f5f6f8;
}
.lc-goods-rank__inner--layout1 .lc-goods-rank__item:hover .lc-goods-rank__name {
  color: #c81923;
}
.lc-goods-rank__inner--layout1 .lc-goods-rank__item--top {
  height: 59px;
  padding-left: 0;
  border-top: 0;
}
.lc-goods-rank__inner--layout1 .lc-goods-rank__item--top .lc-goods-rank__img {
  display: block;
}
.lc-goods-rank__inner--layout1 .lc-goods-rank__item--top .lc-goods-rank__name {
  margin-bottom: -10px;
}
.lc-goods-rank__inner--layout1 .lc-goods-rank__item--top .lc-goods-rank__order {
  position: absolute;
  top: 15px;
  left: -4px;
  width: 23px;
  height: 17px;
  line-height: 15px;
  text-align: center;
  color: rgb(255, 247, 247);
  background-repeat: no-repeat;
  background-size: 100%;
}
.lc-goods-rank__inner--layout1
  .lc-goods-rank__item--top
  .lc-goods-rank__order-1 {
  background-image: url("");
}
.lc-goods-rank__inner--layout1
  .lc-goods-rank__item--top
  .lc-goods-rank__order-2 {
  background-image: url("");
}
.lc-goods-rank__inner--layout1
  .lc-goods-rank__item--top
  .lc-goods-rank__order-3 {
  background-image: url("");
}
.lc-goods-rank__inner--layout2 {
  overflow: hidden;
  padding: 10px 20px 0;
  background: #fff;
}
.lc-goods-rank__inner--layout2 .lc-goods-rank__hd {
  margin-bottom: 9px;
}
.lc-goods-rank__inner--layout2 .lc-goods-rank__info {
  position: relative;
  padding: 5px 0;
  height: 110px;
  overflow: hidden;
}
.lc-goods-rank__inner--layout2 .lc-goods-rank__list {
  margin-right: -20px;
}
.lc-goods-rank__inner--layout2 .lc-goods-rank__list::before,
.lc-goods-rank__inner--layout2 .lc-goods-rank__list::after {
  content: " ";
  display: table;
}
.lc-goods-rank__inner--layout2 .lc-goods-rank__list::after {
  clear: both;
}
.lc-goods-rank__inner--layout2 .lc-goods-rank__comment-info {
  position: absolute;
  left: 0;
  bottom: 5px;
}
.lc-goods-rank__inner--layout2 .lc-goods-rank__price {
  display: block;
}
.lc-goods-rank__inner--layout2 .lc-goods-rank__order {
  position: absolute;
  top: 15px;
  left: -4px;
  width: 23px;
  height: 17px;
  line-height: 15px;
  text-align: center;
  color: #fff;
  background-repeat: no-repeat;
  background-size: 100%;
  background-image: url("");
}
.lc-goods-rank__inner--layout2 .lc-goods-rank__order-1 {
  background-image: url("");
}
.lc-goods-rank__inner--layout2 .lc-goods-rank__order-2 {
  background-image: url("");
}
.lc-goods-rank__inner--layout2 .lc-goods-rank__order-3 {
  background-image: url("");
}
.lc-goods-rank__inner--layout2 .lc-goods-rank__item {
  position: relative;
  float: left;
  width: 360px;
  height: 120px;
  margin-right: 20px;
  padding-bottom: 15px;
}
.lc-goods-rank__inner--layout2 .lc-goods-rank__item::before,
.lc-goods-rank__inner--layout2 .lc-goods-rank__item::after {
  content: " ";
  display: table;
}
.lc-goods-rank__inner--layout2 .lc-goods-rank__item::after {
  clear: both;
}
.lc-goods-rank__inner--layout2 .lc-goods-rank__item:hover .lc-goods-rank__name {
  color: #c81923;
}
.lc-goods-rank__inner--layout2 .lc-goods-rank__img {
  float: left;
  margin-right: 10px;
  width: 120px;
  height: 120px;
}
.lc-goods-rank__inner--layout3 .lc-goods-rank__list {
  margin-right: -10px;
  margin-bottom: -10px;
}
.lc-goods-rank__inner--layout3 .lc-goods-rank__list::before,
.lc-goods-rank__inner--layout3 .lc-goods-rank__list::after {
  content: " ";
  display: table;
}
.lc-goods-rank__inner--layout3 .lc-goods-rank__list::after {
  clear: both;
}
.lc-goods-rank__inner--layout3 .lc-goods-rank__good-rate {
  width: 100px;
  height: 23px;
  border: 1px solid #ff96a9;
  color: #ff2d54;
  line-height: 23px;
  text-align: center;
  border-radius: 25px;
}
.lc-goods-rank__inner--layout3 .lc-goods-rank__good-rate::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
  width: 12px;
  height: 11px;
  background: url("")
    no-repeat;
  background-size: 100%;
}
.lc-goods-rank__inner--layout3 .lc-goods-rank__item {
  position: relative;
  float: left;
  width: 190px;
  height: 280px;
  overflow: hidden;
  margin: 0 10px 10px 0;
  transition: transform 0.3s ease-in-out;
}
.lc-goods-rank__inner--layout3 .lc-goods-rank__item:hover {
  transform: translateY(-5px);
}
.lc-goods-rank__inner--layout3 .lc-goods-rank__item--nth1 {
  width: 390px;
}
.lc-goods-rank__inner--layout3 .lc-goods-rank__item--nth1 .lc-goods-rank__img {
  height: 120px;
  padding: 20px 0;
  background-color: #f42d54;
}
.lc-goods-rank__inner--layout3
  .lc-goods-rank__item--nth1
  .lc-goods-rank__img
  img {
  width: 120px;
  height: 120px;
  border-radius: 120px;
}
.lc-goods-rank__inner--layout3 .lc-goods-rank__item--nth1 .lc-goods-rank__info {
  padding-left: 75px;
}
.lc-goods-rank__inner--layout3
  .lc-goods-rank__item--nth1
  .lc-goods-rank__comment-info {
  left: 75px;
}
.lc-goods-rank__inner--layout3
  .lc-goods-rank__item--nth1
  .lc-goods-rank__order {
  left: 0;
  font-size: 74px;
  width: 75px;
  text-align: center;
  opacity: 1;
}
.lc-goods-rank__inner--layout3
  .lc-goods-rank__item--nth2
  .lc-goods-rank__order {
  opacity: 0.8;
}
.lc-goods-rank__inner--layout3
  .lc-goods-rank__item--nth3
  .lc-goods-rank__order {
  opacity: 0.6;
}
.lc-goods-rank__inner--layout3
  .lc-goods-rank__item--nth4
  .lc-goods-rank__order {
  opacity: 0.4;
}
.lc-goods-rank__inner--layout3 .lc-goods-rank__comment-info {
  position: absolute;
  left: 50px;
  top: 10px;
}
.lc-goods-rank__inner--layout3 .lc-goods-rank__order {
  position: absolute;
  left: -10px;
  top: 160px;
  color: #f42d54;
  font-size: 72px;
  height: 120px;
  line-height: 120px;
  font-weight: bolder;
  opacity: 0.2;
}
.lc-goods-rank__inner--layout3 .lc-goods-rank__info {
  position: relative;
  padding-left: 50px;
  padding-top: 45px;
  height: 120px;
  overflow: hidden;
}
.lc-goods-rank__inner--layout3 .lc-goods-rank__img {
  height: 160px;
}
.lc-goods-rank__inner--layout3 .lc-goods-rank__img img {
  display: block;
  margin: 0 auto;
  width: 160px;
  height: 100%;
}
</style>
